<meta charset="UTF-8">
<div id="notStorage">
    <div class="full" style="padding: 10px;">
        <h3 class="h3-title">{{$t("bgMgr.unclaimed")}}</h3>
        <div style="padding: 10px 0;">
            <i-input v-model.trim="queryParameter" style="width: 200px;" icon="ios-close-circle-outline" @on-click="cleanValue"></i-input>
            <i-button type="primary" @click="queryNoFoundDeviceids">{{$t('reportForm.query')}}</i-button>
            <i-button type="error" @click="clearNoFoundDeviceids">{{$t('reportForm.clean')}}</i-button>
            <span>{{isZh?'当前未认领设备数':'Currently not claimed equipment'}} :{{totalcount}}</span>
        </div>
        <div>
            <i-table border ref="table" :columns="columns" :data="tableData" :loading="loading" :height="taleHeight"></i-table>
        </div>
        <Modal v-model="modal" width="800" :title="$t('device.editDev')">
            <div style="width:700px;margin:10px auto">
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("reportForm.selectAccount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <el-select v-model="createrToUser" :popper-append-to-body="popperAppendToBody" style="width: 100%;" size="mini" filterable>
                            <el-option v-for="item in userlists" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("alarm.devName")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="devicename"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("alarm.devNum")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="deviceid" disabled></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.devType")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="devicetype">
                            <i-option v-for="item in deviceTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="20" :offset="4">
                        <Alert type="warning">
                            <h3>{{$t("device.addNewDeviceTip1")}}</h3>
                            <p v-if="isZh">
                                {{$t("device.addNewDeviceTip2")}}
                            </p>
                            <p v-if="isZh">
                                {{$t("device.addNewDeviceTip3")}}
                            </p>
                            <p v-if="isZh">
                                {{$t("device.addNewDeviceTip4")}}
                            </p>
                        </Alert>
                    </i-col>
                </Row>
            </div>

            <div slot="footer" style="text-align: center;">
                <i-button style="width:500px" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
            </div>
        </Modal>

        <transition name="fade">
            <div v-show="mapModal" class="posi-map-wraper">
                <div class="map-modal" @click="mapModal=false"></div>
                <div class="inner-map-wraper">
                    <div class="posi-map-title">
                        {{$t("reportForm.seePosi")}}
                        <div class="map-close"></div>
                    </div>
                    <div id="posi-map"></div>
                </div>
            </div>
        </transition>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#notStorage",
            i18n: utils.getI18n(),
            data: {
                modal: false,
                isZh: isZh,
                totalcount: '0',
                mapModal: false,
                queryParameter: '',
                createrToUser: '',
                devicename: '',
                deviceid: '',
                devicetype: '',
                taleHeight: 300,
                loading: false,
                popperAppendToBody: false,
                columns: [{
                    type: 'index',
                    width: 60
                }, {
                    title: vRoot.$t('alarm.devNum'),
                    key: "deviceid",
                    width: 150,
                }, {
                    title: vRoot.$t('reportForm.time'),
                    width: 150,
                    key: "time"
                }, {
                    title: vRoot.$t('bgMgr.protocolType'),
                    width: 120,
                    key: "protocolType"
                }, {
                    title: vRoot.$t('reportForm.address'),
                    width: 170,
                    render: function(h, params) {
                        var positionlast = params.row;
                        if (positionlast == null) {
                            return h('span', {}, vRoot.$t('reportForm.empty'));
                        } else {
                            var address = params.row.address;
                            if (address != null) {
                                return h('span', {}, address);
                            } else {
                                var lat = positionlast.callat;
                                var lon = positionlast.callon;
                                return h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: function() {
                                            utils.getJiuHuAddressSyn(lon, lat, function(resp) {
                                                if (resp && resp.address) {
                                                    vueInstanse.tableData[params.index].address = resp.address;
                                                    LocalCacheMgr.setAddress(lon, lat, resp.address);
                                                }
                                            })
                                        }
                                    }
                                }, vRoot.$t('reportForm.getAddress'))
                            }
                        }
                    }
                }, {
                    width: 170,
                    title: vRoot.$t('videoSettings.longitudeAndLatitude'),
                    render: function(h, params) {
                        var positionlast = params.row;
                        if (positionlast == null) {
                            return h('span', {}, vRoot.$t('reportForm.empty'));
                        } else {
                            var address = params.row.address;

                            var lat = positionlast.callat;
                            var lon = positionlast.callon;
                            return h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: function() {
                                        vueInstanse.mapModal = true;
                                        vueInstanse.addMarkerToMap(params);
                                    }
                                }
                            }, lat + "," + lon)

                        }
                    }
                }, {
                    'title': vRoot.$t('alarm.action'),
                    width: 115,
                    render: function(h, params) {
                        return h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.modal = true;
                                    vueInstanse.deviceid = params.row.deviceid;
                                    vueInstanse.index = params.index;
                                }
                            }
                        }, vRoot.$t('bgMgr.addDev'))
                    }
                }, {
                    title: vRoot.$t('bgMgr.packetDescr'),
                    key: "packetDescr",
                    width: 1000,
                }, ],
                tableData: [],
                deviceTypeList: [],
                userlists: [],
            },
            methods: {
                cleanValue: function() {
                    this.queryParameter = '';
                },
                addMarkerToMap: function(params) {
                    utils.showWindowMap(vueInstanse, params);
                },
                getOpenMapMarkerIcon: function(course) {
                    var imgPath = '';
                    if (utils.isLocalhost()) {
                        imgPath = myUrls.viewhost + 'images/carstate/0_green_0.png';
                    } else {
                        imgPath = '../images/carstate/0_green_0.png';
                    };
                    return new ol.style.Style({
                        image: new ol.style.Icon( /** @type {module:ol/style/Icon~Options} */ ({
                            crossOrigin: 'anonymous',
                            src: imgPath,
                            rotation: course * Math.PI / 180, //角度转化为弧度
                            imgSize: [32, 32]
                        })),
                    });
                },
                initMap: function() {
                    this.markerLayer = null;
                    this.mapInstance = utils.initWindowMap('posi-map');
                },

                handleSubmit: function() {
                    var me = this;
                    var url = myUrls.addDevice();

                    if (this.devicetype === "") {
                        me.$Message.error(me.$t("message.selectDeviceTtypeTips"));
                        return;
                    }

                    var data = {
                        deviceid: this.deviceid,
                        devicetype: this.devicetype,
                        expirenotifytime: Date.now() + 24 * 3600 * 1000 * 365,
                        loginenable: 1,
                        deviceenable: 1,
                        reportedpoint: 0,
                    };

                    if (this.devicename.trim()) data.devicename = this.devicename.trim();


                    if (globalUserList.indexOf(this.createrToUser) == -1) {
                        me.$Message.error(me.$t("message.selectCorrectAccount"));
                        return;
                    }

                    if (this.userType < 4) {
                        data.creater = this.createrToUser;
                    } else {
                        data.creater = userName;
                    };

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            rootuser = null;
                            isNeedRefresh = true;
                            me.modal = false;
                            me.tableData.splice(me.index, 1);
                            me.$Message.success(me.$t("message.addSucc"));
                        } else if (resp.status == -1) {
                            if (resp.cause !== null && resp.cause.indexOf("token") != -1) {
                                window.location.href = "index.html";
                            } else {
                                me.$Message.error(me.$t("message.addFail"));
                            }
                        } else if (resp.status == 1) {
                            me.$Message.error(me.$t("message.IDRepeat"));
                        } else if (resp.status == 2) {
                            me.$Message.error(me.$t('message.IDError'));
                        } else if (resp.status == 3) {
                            me.$Message.error(me.$t('message.reqFail'));
                        };
                    });
                },
                getDeviceType: function() {
                    var me = this;
                    var deviceTypes = vstore.state.deviceTypes;
                    for (var key in deviceTypes) {
                        var item = deviceTypes[key];
                        if (item) {
                            var label = item.typename;
                            if (item.remark) {
                                label += "(" + item.remark + ")";
                            }
                            me.deviceTypeList.push({
                                value: item.devicetypeid,
                                label: label
                            });
                        }
                    }
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 760;
                    }
                    this.taleHeight = wHeight - 160;
                },
                queryNoFoundDeviceids: function() {
                    var me = this;
                    var url = myUrls.listNoFoundDeviceids();
                    this.loading = true;
                    utils.sendAjax(url, {
                        keyword: this.queryParameter
                    }, function(resp) {
                        if (resp.status == 0) {
                            resp.devices.forEach(function(device) {
                                var positionlast = device;
                                device.address = null;
                                if (positionlast.callat !== null && positionlast.callon !== null) {
                                    positionlast.callat = positionlast.callat.toFixed(5);
                                    positionlast.callon = positionlast.callon.toFixed(5);
                                    device.address = LocalCacheMgr.getAddress(positionlast.callon, positionlast.callat);
                                }
                                device.time = DateFormat.longToLocalDateTimeStr(device.updatetime)
                            })
                            resp.devices.sort(function(a, b) {
                                return a.updatetime - b.updatetime
                            });
                            me.tableData = resp.devices;
                            me.totalcount = resp.totalcount;
                        }
                        me.loading = false;
                    })
                },
                clearNoFoundDeviceids: function() {
                    var me = this;
                    var url = myUrls.clearNoFoundDeviceids();
                    utils.sendAjax(url, {}, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success(me.$t('message.clearSucc'));
                            me.tableData = [];
                        } else {
                            me.$Message.error(me.$t('message.clearFail'));
                        }
                    });
                }
            },
            mounted: function() {
                var me = this;
                this.userType = vstore.state.userType;
                this.createrToUser = userName;
                var userlists = [];
                globalUserList.forEach(function(item) {
                    userlists.push({
                        label: item,
                        value: item,
                    })
                });
                this.userlists = userlists;
                this.initMap();
                this.calcTableHeight();
                this.queryNoFoundDeviceids();
                this.getDeviceType();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            },
        })
    </script>
</div>